<page-header title="添加模板" [breadcrumb]="breadcrumb" [action-group]="false" [action]="action" [back]="true">
    <ng-template #breadcrumb>
        <ql-breadcrumb>
            <ql-breadcrumb-item>筛选模板</ql-breadcrumb-item>
            <ql-breadcrumb-item>添加模板</ql-breadcrumb-item>
        </ql-breadcrumb>
    </ng-template>
    <ng-template #action>
        <ql-button type="primary" (click)="submitFun()">保存</ql-button>
        <ql-button type="primary">重置</ql-button>
    </ng-template>
</page-header>

<page-container>
    <ql-form [inline]="true" ql-row label-width="110px" [formGroup]="formGroup">
        <ql-card header="模板名称范围" class="ql-text-left">
            <div ql-row gutter="24">
                <div ql-col span="12">
                    <ql-form-item label="筛选模板名称">
                        <ql-input></ql-input>
                    </ql-form-item>
                </div>
                <div ql-col span="12">
                    <ql-form-item label="模板筛选范围">
                        <ql-select [clearable]="true">
                            <!-- <ql-option *ngFor="let item of shareData" [label]="item.label" [value]="item.value"> </ql-option> -->
                        </ql-select>
                    </ql-form-item>
                </div>
                <div ql-col span="12">
                    <ql-form-item label="起始时间基点">
                        <ql-date-picker placeholder="起始时间基点"></ql-date-picker>
                    </ql-form-item>
                </div>
                <div ql-col span="12">
                    <ql-form-item label="结束时间基点">
                        <ql-date-picker placeholder="结束时间基点"></ql-date-picker>
                    </ql-form-item>
                </div>
            </div>
        </ql-card>
        <ql-card header="客户基本属性" class="ql-text-left">
            <div ql-row>
                <div ql-col span="12">
                    <ql-form-item label="AUM最小值">
                        <ql-input></ql-input>
                    </ql-form-item>
                </div>
                <div ql-col span="12">
                    <ql-form-item label="AUM最大值">
                        <ql-input></ql-input>
                    </ql-form-item>
                </div>
                <div ql-col span="12">
                    <ql-form-item label="总资产最小值">
                        <ql-input></ql-input>
                    </ql-form-item>
                </div>
                <div ql-col span="12">
                    <ql-form-item label="总资产最大值">
                        <ql-input></ql-input>
                    </ql-form-item>
                </div>
                <div ql-col span="12 ">
                    <ql-form-item label="职业">
                        <ql-input></ql-input>
                    </ql-form-item>
                </div>
                <div ql-col span="12">
                    <ql-form-item label="性别">
                        <ql-select [clearable]="true">
                            <ql-option *ngFor="let item of sexitems" [label]="item.label" [value]="item.value"> </ql-option>
                        </ql-select>
                    </ql-form-item>
                </div>
                <div ql-col span="12 ">
                    <ql-form-item label="年龄 ">
                        <ql-select [clearable]="true">
                            <ql-option *ngFor="let item of ageitems" [label]="item.label" [value]="item.value"> </ql-option>
                        </ql-select>
                    </ql-form-item>
                </div>
                <div ql-col span="12 ">
                    <ql-form-item label="婚姻">
                        <ql-select [clearable]="true">
                            <ql-option *ngFor="let item of marryitems" [label]="item.label" [value]="item.value"> </ql-option>
                        </ql-select>
                    </ql-form-item>
                </div>
                <div ql-col span="12 ">
                    <ql-form-item label="所属行业">
                        <ql-select [clearable]="true">
                            <ql-option *ngFor="let item of jobtypeitems" [label]="item.label" [value]="item.value"> </ql-option>
                        </ql-select>
                    </ql-form-item>
                </div>
                <div ql-col span="12 ">
                    <ql-form-item label="客户等级">
                        <ql-select [clearable]="true">
                            <ql-option *ngFor="let item of customerLevel" [label]="item.label" [value]="item.value"> </ql-option>
                        </ql-select>
                    </ql-form-item>
                </div>
                <div ql-col span="12 ">
                    <ql-form-item label="客户潜力值">
                        <ql-select [clearable]="true">
                            <ql-option *ngFor="let item of customerPotential" [label]="item.label" [value]="item.value"> </ql-option>
                        </ql-select>
                    </ql-form-item>
                </div>
                <div ql-col span="12 ">
                    <ql-form-item label="学历 ">
                        <ql-select [clearable]="true">
                            <ql-option *ngFor="let item of schoolitems" [label]="item.label" [value]="item.value"> </ql-option>
                        </ql-select>
                    </ql-form-item>
                </div>
                <div ql-col span="12 ">
                    <ql-form-item label="星级评级 ">
                        <ql-select [clearable]="true">
                            <ql-option *ngFor="let item of starcomment" [label]="item.label" [value]="item.value"> </ql-option>
                        </ql-select>
                    </ql-form-item>
                </div>
                <div ql-col span="12 ">
                    <ql-form-item label="理财风险">
                        <ql-select [clearable]="true">
                            <ql-option *ngFor="let item of lcrick" [label]="item.label" [value]="item.value"> </ql-option>
                        </ql-select>
                    </ql-form-item>
                </div>
                <div ql-col span="12 ">
                    <ql-form-item label="基金风险">
                        <ql-select [clearable]="true">
                            <ql-option *ngFor="let item of jijinrick" [label]="item.label" [value]="item.value"> </ql-option>
                        </ql-select>
                    </ql-form-item>
                </div>
                <div ql-col span="12">
                    <ql-form-item label="开户时间 ">
                        <ql-date-picker> </ql-date-picker>
                    </ql-form-item>
                </div>
            </div>
        </ql-card>

        <ql-card>
            <ng-template #header>
                <card-header title="客户标签筛选">
                    <ql-button type="primary" (click)="onSelectTags()" size="small">选择客户</ql-button>
                </card-header>
            </ng-template>
            <data-table [model]="tagList">
                <ql-table-column model-key="code" label="标签编码"></ql-table-column>
                <ql-table-column model-key="type" label="标签类别"></ql-table-column>
                <ql-table-column model-key="frequency" label="使用频次"></ql-table-column>
                <ql-table-column model-key="description" label="标签说明"></ql-table-column>
                <ql-table-column model-key="createTime" label="创建日期"></ql-table-column>
                <ql-table-column model-key="customerCount" label="客户数量"></ql-table-column>
                <ql-table-column model-key="state" label="标签状态"></ql-table-column>
                <ql-table-column label="操作">
                    <ng-template #slot let-scope="scope">
                        <ql-button type="text">剔除</ql-button>
                    </ng-template>
                </ql-table-column>
            </data-table>
        </ql-card>

        <ql-card header="客户产品属性筛选" class="ql-text-left">
            <div ql-row gutter="24">
                <data-table [model]="">
                    <ql-table-column model-key="" label="产品名称"> </ql-table-column>
                    <ql-table-column model-key="" label="产品代码"> </ql-table-column>
                    <ql-table-column model-key="" label="产品类别"> </ql-table-column>
                </data-table>
            </div>
        </ql-card>
        <ql-card header="客户签约类型属性" class="ql-text-left">
            <div ql-row gutter="24">
                <div ql-col span="12">
                    <ql-form-item label="签约类型 ">
                        <ql-select [clearable]="true">
                            <ql-option *ngFor="let item of []" [label]="item.label" [value]="item.value"> </ql-option>
                        </ql-select>
                    </ql-form-item>
                </div>
                <div ql-col span="12">
                    <ql-form-item label="参数值">
                        <ql-select [clearable]="true">
                            <ql-option *ngFor="let item of []" [label]="item.label" [value]="item.value"> </ql-option>
                        </ql-select>
                    </ql-form-item>
                </div>
            </div>
        </ql-card>
        <!-- <div ql-col [span]="24" class="ql-text-right ql-padding">
            <ql-button type="primary" size="small">保存</ql-button>
            <ql-button type="primary" size="small">提交</ql-button>
        </div> -->
    </ql-form>

    <ng-template #tagcompontent>
        <app-tag></app-tag>
        <div ql-row>
            <div ql-col [span]="24" class="ql-text-right ql-padding">
                <ql-button type="primary" size="small" (click)="closeFun()">确认</ql-button>
            </div>
        </div>
    </ng-template>

</page-container>
